<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/MicroCircle/OperationLog.css"/>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>
<body>
<div class="layui-row boxStyle">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                微圈操作日志
                <div class="btnRight" style="margin-bottom: 20px">
                    <button type="button" class="layui-btn layui-btn layui-btn-sm" onclick="load()">
                        <i class="layui-icon layui-icon-refresh-1"></i>
                        刷新
                    </button>
                    <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-return"></i>
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--筛选查询-->
<div class="layui-row boxStyle">
    <div class="layui-col-md11">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe615;</i>
                筛选查询
            </div>
            <div class="layui-card-body">
                <form lay-filter="formTest" class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="trueName" required lay-verify="required" placeholder="请输入管理员名称" autocomplete="off" class="layui-input">
                        </div>

                        <label class="layui-form-label">操作列表：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="remark" required lay-verify="required" placeholder="请输入操作的列表" autocomplete="off" class="layui-input">
                        </div>

                        <label class="layui-form-label">操作类型：</label>
                        <div class="layui-input-inline">
                            <select lay-filter="cssClass" name="type" placeholder="请选择操作类型">
                                <option value=""></option>
                                <option value="5">查看</option>
                                <option value="2">添加</option>
                                <option value="4">修改</option>
                                <option value="3">删除</option>
                            </select>
                        </div>

                        <label class="layui-form-label">操作时间：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="createDate" required lay-verify="required" placeholder="请选择操作时间" autocomplete="off" class="layui-input">
                        </div>

                            <div id="caoZuo" style="float: right;">
                                <button type="button" class="layui-btn" onclick="search()">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-warm" onclick="getData('', '', '', '')">
                                    <i class="layui-icon layui-icon-refresh-1"></i> 重置
                                </button>
                            </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--商品列表-->
<div class="layui-row boxStyle" style="margin-top: 20px">
    <div class=" headerCenter ">
        <div id="toolutil" style="display: none;">
                <span>
                    <i class="layui-icon layui-icon-align-left"></i>
                    操作日志数据列表
                </span>
        </div>
        <!--商品表格-->
        <div class="layui-col-md11 backColor">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
<!--<script src="/js/MicroCircle/OperationLog.js"></script>-->
<script>
    var form,$,table;

    $(document).click(function(){//子页面
        $(".rightmenu",window.parent.document).hide();
    });

    layui.use(['form','jquery','table'],function() {
        form = layui.form;
        $ = layui.jquery;
        table = layui.table;

        //查询操作日志
        getData('', '', '', '');
    });


    function getData(trueName, remark, type, createDate){
        $.ajax({
            url: '/microcircle/selLog',
            type: 'post',
            dataType: 'json',
            data: {
                'trueName': trueName ,
                'remark': remark,
                'type': type,
                'createDate': createDate,
            },
            success: function (item) {
                getTable(item.data);
            }
        })
    }

    //表数据
    function getTable(data){
        table.render({
            elem: '#demo' ,
            data: data,
            toolbar:'#toolutil',
            page:{
                layout:['count','prev','page','next','limit','skip','refresh'],
                limits:[10,20,30],
            },
            cols:[[
                {type:'checkbox',},
                {title:'序号', align:'center' ,width:70, templet:function (data) {
                        return data.logId;
                    }},
                {field:'trueName',title:'管理员名称',align:'center'},
                {field:'remark',title:'操作列表',align:'center'},
                {field:'createDate',title:'执行时间',align:'center'},
                {field:'type',title:'操作类型',align:'center',templet: function (data) {
                    var type;
                        if (data.type == 2){
                            type = "添加";
                        }
                        if (data.type == 3){
                            type = "删除";
                        }
                        if (data.type == 4){
                            type = "修改";
                        }
                        if (data.type == 5){
                            type = "查看";
                        }
                        return type;
                    }},
                {field:'',title:'备注',align:'center',templet:function () {
                        return "无内容";
                    }},
                {field:'',title:'操作',align:'center',templet:function(data){
                        return "<a class='operation' href='javascript:del(\"" + data.logId + "\");'>删除</a>"
                    }},
            ]]
        });
    };

    //返回
    function backOff() {
        var arr = localStorage.getItem("numArr");
        var numArr = arr.split(",");
        numArr.pop();
        window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
        localStorage.setItem("numArr",numArr);
    }

    //刷新
    function load() {
        location.reload();
    };

    //搜索
    function search() {
        var data = form.val("formTest");
        var trueName = $("input[name=trueName]").val();
        getData(trueName, data.remark, data.type, data.createDate);
    }

    //删除
    function del(id) {
        layer.open({
            type:1,
            title: "删除操作日志",
            content:"<div style='font-size: 16px; margin:30px  ;'>您确定要删除此操作日志吗?</div>",
            area:['300px','200px'],
            btn:["确定","取消"],
            yes: function (index,layero) {
                $.ajax({
                    url: '/microcircle/delLog',
                    type: 'post',
                    dataType: 'json',
                    data: {'logId': id},
                    success: function (item) {
                        if (item.data){
                            getData('', '', '', '');
                            layer.msg('删除成功');
                            layer.close(index);
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                })
            },
            btn2: function (index,layero) {
                layer.close(index);
            }
        });
    }
</script>
</body>
</html>